<template>
  <div class="com-container" style="fontsize: 12px">
    <div
      class="com-chart com-charts"
      ref="echarts"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      v-show="anm"
      style="z-index: 555; position: relative"
    ></div>
    <!-- <div style="width: 100%;height: 100%;" v-show="anm">123</div> -->
  </div>
</template>

<script>
import "echarts/lib/component/markLine";
export default {
  props: ["commonData","loading"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      xDatas: null,
      anm: true,
 
    };
  },
  watch: {
    commonData: {
      handler(newVal) {
        if (newVal) {
          this.allData = newVal;

          this.getData();
        }
      },
      immediate: true,
    },
  },

  mounted() {
    setTimeout(() => {
      this.initChart();

      window.addEventListener("resize", this.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter();
    }, 500);
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);

      const initOption = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["相对温度", "相对湿度"],
        },
        calculable: true,

        xAxis: {
          type: "category",
          //   data: xAxisData,
          axisLine: {
            lineStyle: {
              color: "#cdd5e2",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#666666",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            // name: "℃",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#cdd5e2",
              },
            },
            axisLabel: {
              formatter: "{value}℃",
              textStyle: {
                color: "#93D034",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "value",
            // name: "%",
            nameTextStyle: {
              color: "#666666",
            },
            position: "right",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#cdd5e2",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#47A8F7",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        dataZoom: [
          {
            show: true,
            height: 10,
            xAxisIndex: [0],
            bottom: 60,
            start: 10,
            end: 80,
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        // visualMap: [
        //   {
        //     show: false,
        //     seriesIndex: 0,
        //     pieces: [
        //       {
        //         gt: 0,
        //         lte: 19,
        //         color: "red",
        //       },
        //       {
        //         gt: 19,
        //         lte: 28,
        //         color: "#93D034",
        //       },
        //       {
        //         gt: 28,
        //         let: 100,
        //         color: "red",
        //       },
        //     ],
        //   },
        //   {
        //     show: false,
        //     seriesIndex: 1,
        //     pieces: [
        //       {
        //         gt: 0,
        //         lte: 95,
        //         color: "red",
        //       },
        //       {
        //         gt: 95,
        //         lte: 98,
        //         color: "#47A8F7",
        //       },
        //       {
        //         gt: 98,
        //         let: 100,
        //         color: "red",
        //       },
        //     ],
        //   },
        // ],
        series: [
          {
            name: "相对温度",
            type: "line",
            // data: [22, 23, 30, 24, 26, 19, 21],
            smooth: true,
          },
          {
            name: "相对湿度",
            type: "line",
            smooth: true,

            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用

            // data: [90, 95, 96, 98, 99, 90, 94],
            // markLine: {
            //   silent: true,
            //   data: [
            //     {
            //       yAxis: 95,
            //     },
            //     {
            //       yAxis: 98,
            //     },
            //   ],
            // },
          },
        ],
      };

      this.chartInstance.setOption(initOption);
    },
    getData() {
      var that = this;

      setTimeout(() => {
        that.updateChart();
        // that.updateChart();
      }, 800);
    },
    updateChart() {
      var data;
      if (this.allData.length > 0) {
        data = this.allData;
        this.anm = true;
        this.xDatas = [];
        var temperature = [];
        var humidity = [];
        data.map((item) => {
          this.xDatas.push(item.F_Createdates);
          temperature.push(item.fTemperature.substr(1, 4));
          humidity.push(item.fHumidity.substr(1, 4));
        });

        var dataOption = {
          xAxis: {
            // data: ['C10', 'C15', 'C20', 'C25', 'C30', 'C35', 'C40', 'C45', 'C50', 'C55', 'C60', 'other'],//数据
            data: this.xDatas,
          },
          visualMap: [
            {
              show: false,
              seriesIndex: 0,
              pieces: [
                {
                  gt: 0,
                  lte: data[0].TemperatureMin - 0,
                  color: "red",
                },
                {
                  gt: data[0].TemperatureMin - 0,
                  lte: data[0].TemperatureMax - 0,
                  color: "#93D034",
                },
                {
                  gt: this.allData[0].TemperatureMax - 0 + 1,
                  let: 100,
                  color: "red",
                },
              ],
            },
            {
              show: false,
              seriesIndex: 1,
              pieces: [
                {
                  gt: 0,
                  lte: data[0].Humidity - 1,
                  color: "red",
                },
                {
                  gt: data[0].Humidity - 0,
                  lte: 100,
                  color: "#47A8F7",
                },
              ],
            },
          ],
          series: [
            {
              data: temperature, //温度
              // markLine: {
              //   data: [
              //         {
              //             name: '最大值',
              //             yAxis: this.allData[0].TemperatureMax-0,

              //         },
              //         {
              //             name: '最小值',
              //             yAxis: this.allData[0].TemperatureMin-0,
              //         },
              //     ],
              // },
              markLine: {
                silent: true,
                data: [
                  {
                    yAxis: data[0].TemperatureMin - 0,
                  },
                  {
                    yAxis: data[0].TemperatureMax - 0,
                  },
                ],
              },
            },
            {
              data: humidity, // 盘数
              markLine: {
                silent: true,
                data: [
                  {
                    yAxis: data[0].Humidity - 0,
                  },
                ],
              },
            },
          ],
        };

        this.chartInstance.setOption(dataOption);
      } else {
        this.anm = false;
        // this.loading = false;
      }
      // else {
      //    data = [];
      //    this.anm=false
      // }
    },
    screenAdapter() {
      const titleFontSize = this.$refs.echarts.offsetWidth / 100;

      //   和分辨率大小相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
            // fontWeight: 500
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scope></style>
